import React from 'react'
import { observer, inject } from "mobx-react"
import {withRouter} from "react-router-dom"
@withRouter
@inject("RecommendStore")
@observer
class Recommend extends React.Component {
    jump(id){
        this.props.history.push(`/Discover/Playlist/ListDetails?id=${id}`)
    }
    componentDidMount() {
        this.props.RecommendStore.get_Recommend()
        // let Arr = this.props.RecommendStore.Recommend_store
    }
    render() {
        return (
            <fieldset className="recommend_box">
                <hr/>
                <h1>推荐歌单</h1>
                <ul className="recommend_ul">
                    {this.props.RecommendStore.Recommend_store.map((item, index) =>
                        <li key={index} onClick={this.jump.bind(this,item.id)} className="Recommend_li">
                            <img src={item.picUrl} alt="" className="pic" />
                            <p className="pic_p">{item.name}</p>
                        </li>
                    )}
                </ul>
            </fieldset>
        )
    }
}
export default Recommend